<template>
  <el-card class="box-card">
    <el-row :gutter="20" style="display: flex;flex-wrap: wrap">
      <el-col :span="8" v-for="column in queryColumns" :key="column">
        <el-form>
          <el-form-item :label="column.label">
            <!--          <component-->
            <!--              :is="column.component"-->
            <!--              :placeholder="column.placeholder"-->
            <!--              v-model="query[column.prop]"-->
            <!--              @input="input"-->
            <!--              clearable>-->
            <!--          </component>-->
            <el-input
                v-model="query[column.prop]"
                :placeholder="column.placeholder"
                clearable>
            </el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <div style="flex: 1"></div>
      <el-col :span="8" style="display: flex">
        <div style="flex: 1"></div>
        <el-button v-if="showSubmit" type="primary" @click="doSelect">查询</el-button>
        <el-button v-if="showReset" type="primary" @click="doReset">重置</el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { ref } from 'vue'
export default {
  name: "ConditionalSearch",
  setup(props , content) {
    let query = ref({})
    let queryColumns = props.columns.filter(item => item.query)

    props.columns.forEach(item => query[item.prop] = '')

    function doSelect() {
      content.emit('callback' , 'doSelect', query.value)
    }
    function doReset() {
      query.value = {}
      content.emit('callback' , 'doReset')
    }
    return {
      query,
      queryColumns,
      doSelect,
      doReset
    }
  },
  props: {
    columns: {
      type: Object,
      required: true,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {}
    },
    showSubmit: { // 是否显示查询按钮
      type: Boolean,
      default: true
    },
    showReset: { // 是否显示重置按钮
      type: Boolean,
      default: false
    },
  }
}
</script>

<style scoped>

</style>
